<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title>videojs</title>
  <script src="./assets/js/vue.2.5.16.js"></script>
  <link href="./assets/css/vant.css" rel="stylesheet">
  <link href="./assets/css/video-js.min.css" rel="stylesheet">

  <script src="./assets/js/vant.min.js"></script>
  <script src="./assets/js/video.min.js"></script>
  <style type="text/css">
    [v-cloak] {
      display: none;
    }
    .videoList {
      width: 5rem;
      height: calc(100vh - 4rem);
      background-color: rgba(0,0,0,0.2);
      position: fixed;
      z-index: 99999;
      top: 2rem;
      right: 0;
      display: flex;
      justify-content: space-around;
      align-items: center;
      display: none;
    }
    .video_item {position: relative; margin-bottom: 0.2rem; background-color: #fff;}
    .vidImg { display: block; width: 5rem; height: 3rem; }
    .vidTitle {background-color: rgba(0,0,0,.5); color: #fff; font-size: 0.5rem; position: absolute; left: 0;top: 0;}
  </style>
</head>

<body>
  <div id="app" class="main" v-cloak>
    <div class="videoContent">
      <video id="myVideo" src="http://vjs.zencdn.net/v/oceans.mp4"
       class="video-js vjs-big-play-centered vjs-fluid" ref="myVideo"
       style="width:100%" webkit-playsinline="true" playsinline="true"
       x-webkit-airplay="true" x5-playsinline="true" x5-video-player-type="h5"
       x5-video-player-fullscreen="true" x5-video-orientation="portraint" src="" ref="myVideo" controls
       preload="none" oncontextmenu="return false" controlslist="noplaybackrate nodownload" 
       disablePictureInPicture>
       
      </video>
    </div>
    <div class="videoList">
      <div class="video_list">
        <div class="video_item" v-for="vid in videoList" :key="vid.src" @click="handleActive(vid)">
          <img class="vidImg" :src="vid.poster" alt="">
          <div class="vidTitle">{{vid.name}}</div>
        </div>
      </div>
    </div>
  </div>
</body>

<script type="text/javascript" src="./assets/js/uni.webview.1.5.4.js"></script>
<script type="text/javascript">                   
  // 用于接收webview的指令
  window.wvAction = function (data) {
    // decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。
    myApp.wvAction(decodeURIComponent(data));
  }
  Vue.config.productionTip = false;

  const myApp = new Vue({
    el: "#app",
    data() {
      return {
        sysType: "",
        isFullScreen: false,
        myVideo: null,
        videoPlayer: null,
        videoList: [
          {name: "视频1", poster: "./assets/images/word.png", src: "./assets/video/oceans.mp4"},
          {name: "视频2", poster: "", src: "./assets/video/五大员-施工员.mp4"},
          {name: "视频3", poster: "./assets/images/miao.jpg", src: "https://slsp.slyb.top/sv/1b584b43-180b0f119a4/1b584b43-180b0f119a4.mp4"}
        ]
      }
    },
    mounted() {
      this.initVideojs();
    },
    methods: {
      initVideojs() {
        this.myVideo = this.$refs.myVideo;
        let _this = this;
        this.videoPlayer = videojs("myVideo", {
          controls: true,
          autoplay: true,
          fluid: true,
          name: '',
          controlBar: {
            /* 使用children的形式可以控制每一个控件的位置，以及显示与否 */
            children: [{
                name: 'playToggle'
              }, // 播放按钮
              {
                name: 'currentTimeDisplay'
              }, // 当前已播放时间
              {
                name: 'progressControl'
              }, // 播放进度条
              {
                name: 'durationDisplay'
              }, // 总时间
              {
                name: 'volumePanel', // 音量控制
                inline: false, // 不使用水平方式
              },
              {
                name: 'FullscreenToggle'
              } // 全屏
            ]
          }
        })

        // 监听视频播放
        this.videoPlayer.on("loadeddata", function(){
          console.log('資源加載完成，可以播放…………')
          // _this.videoPlayer.play();
        })
        this.videoPlayer.on("error", function(e){
          console.log('加載錯誤…………')
          console.log(e)
        })
      },
      handleActive(vid) {
        this.myVideo.src = vid.src;
        this.myVideo.poster = vid.poster;
      },
      wvAction(res) {
        if (res) {
          res = res.indexOf('{"action":') !== -1 ? JSON.parse(res) : res;
          console.log(res);
          switch (res.action) {
            case "action1":
              vant.Dialog.alert({
                message: res.msg
              })
              break;
            default:
              break;
          }
        }
      }

    },
  })


  // 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
  document.addEventListener('UniAppJSBridgeReady', function () {
    myApp.UniIsReady = true;
    // 通知APP：UniAppJSBridgeReady已触发
    uni.postMessage({
      data: {
        action: "UniAppJSBridgeReady",
        data: {}
      }
    })

    uni.getEnv(function (res) {
      console.log('当前环境：' + JSON.stringify(res));
      // if (!res.plus) {
      //   vant.Dialog.alert({
      //     message: '当前为非plus环境，页面通信请在plus环境下调试',
      //   });
      // }
    });

  });
</script>

</html>